En la anterior entrada veíamos un generador de CSS3 que nos proporciona el código y sería algo así: Ver código

Para hacer uso de ese código tenemos que localizar el lugar que deseamos aplicar esas propiedades.

Para personalizar los post, buscamos en la plantilla:
.post {
aquí añadimos el código
margin:.5em 0 1.5em;
padding-bottom:1.5em;
}


Si lo que deseamos es personalizar los gadgets de la sidebar buscamos:
.sidebar .widget {
aquí añadimos el código
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Bloque que acoge la sidebar:
#sidebar-wrapper {
aquí añadimos el código
width: 220px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

Header o cabecera:
#header-wrapper {
aquí añadimos el código
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Bloque que acoge todas las entradas:
#main-wrapper {
aquí añadimos el código
width: 410px;
float: $startSide;
word-wrap: break-word;
overflow: hidden;
}

Footer:
#footer {
aquí añadimos el código
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Bloque que acoge todo el blog:
#outer-wrapper {
aquí añadimos el código
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Todos esos bloques tienen contenido y es probable que tengamos que ajustar el padding de forma que quede espacio suficiente de separación entre contenido y borde.
Tendremos en cuenta también que si lo que deseamos es añadir fondo y borde no es necesario hacer uso de las opciones para texto:

font-family: Verdana, Geneva, sans-serif;
font-size: 11pt;
color: #FFFFFF;
text-align: left;

Es innecesario añadirlas porque esas propiedades ya las tenemos en nuestra plantilla, igual que ocurre con padding.

Para añadir un gadget de HTML podemos añadir en la plantilla antes de ]]></b:skin> una clase  en este caso "gadget-html" en este caso si añadimos todo el código que nos proporciona el generador porque son estilos que no tenemos añadidos a la plantilla.

#gadget-html {
aquí todo el código del generador
}

Editamos un gadget de HTML y en su interior añadimos:

<div id="gadget-html">
Aquí añadimos el contenido.
</div>
Henry Herrera

Si funciono la barita magica, muchas gracias por enseñarnos un poquito semana tras semana.

Responder
Gem@

:: Gracias Henry, siempre utilizo más la palabra compartir pero esa de enseñar también me gusta por aquello de "Quien enseña aprende dos veces" :)

Responder
Andrea

aprendo un poco más aqui cada dia :D
aunque creo que ya se cual es el problema de mi blog: los codigos.
busque con ctrl + f (sirve mucho para buscar) y no encontre #main-wrapper ¬¬ entonces mi blog tiene algo mal, o algo??
... :S
aunque tan siquiera ya se de que hablas :)
pensar que hace unos meses no sabia nada de esto :O
cuidate!

Responder
Gem@

:: Hola andii el blog no debe estar mal el problema por llamarlo de alguna forma es que la plantilla sea de las nuevas de Blogger o creada con el diseñador de plantillas en ambos casos el código es confuso y no se parece en nada a los códigos que ves en mis ejemplos que son sobre la plantilla Minima.
He visitado tu perfil pero no sé a que blog deseas hacer el cambio :S

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top